<template>
  <!-- 商品列表table表格 -->
  <a-table
    :columns="columns"
    :data-source="handleData"
    :pagination="page"
    @change="changePage"
  >
    <div slot="operation" slot-scope="text, record">
      <a-button @click="editGoods(record)">编辑</a-button>
      <a-button @click="remove(record)">删除</a-button>
    </div>
  </a-table>
</template>
<script>
const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "标题",
    dataIndex: "title",
    key: "title",
    ellipsis: true,
  },
  {
    title: "描述",
    dataIndex: "desc",
    key: "desc",
    ellipsis: true,
  },
  {
    title: "类目",
    dataIndex: "categoryName",
    key: "category",
  },
  {
    title: "预售价格",
    dataIndex: "price",
    key: "price",
  },
  {
    title: "折扣价格",
    dataIndex: "price_off",
    key: "price_off",
  },
  {
    title: "标签",
    dataIndex: "tags",
    key: "tags",
    ellipsis: true,
  },
  {
    title: "限制购买数量",
    dataIndex: "inventory",
    key: "inventory",
  },
  {
    title: "上架状态",
    dataIndex: "status",
    key: "status",
    customRender: function (text, record) {
      return text === 1 ? "上架" : "下架";
    },
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    width: 200,
    scopedSlots: { customRender: "operation" },
  },
];

export default {
  props: ["data", "page"],
  data() {
    return {
      columns,
    };
  },
  computed: {
    handleData() {
      return this.data.map((item) => ({
        ...item,
        key: item.id,
      }));
    },
  },
  methods: {
    //   处理分页
    changePage(val) {
      this.$emit("change", val);
    },
    // 编辑所在行商品
    editGoods(record) {
      this.$emit("editGoods", record);
    },
    // 删除选中项
    remove(record) {
      this.$emit("removeGoods", record);
    },
  },
};
</script>
